<!--- 需求接收 -->
<template>
  <HPCommonPage :titleText="'需求接收'">
    <template v-slot:header>
      <el-button type="primary" size="small" @click="exportDemandToExcle"
        >导出</el-button
      >
    </template>
    <template v-slot:searchForm>
      <el-form :inline="true" :model="selectData" class="form-box res-form-box">
        <el-form-item label="需求单号：">
          <el-input
            v-model="selectData.demandNo"
            clearable
            placeholder="请输入需求单号"
          ></el-input>
        </el-form-item>
        <el-form-item label="岗位名称：">
          <el-input
            v-model="selectData.jobName"
            clearable
            placeholder="请输入岗位名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态：">
          <el-select
            v-model="selectData.status"
            placeholder="请选择状态"
            clearable=""
          >
            <el-option
              v-for="item in tabsList"
              :key="item.key"
              :label="item.label"
              :value="item.key"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </template>
    <template v-slot:searchFormbtn>
      <el-button type="success" size="small" @click="selectDemandLists"
        >查询</el-button
      >
    </template>
    <template v-slot:table>
      <HPTable
        :tableHeaderItems="tableHeaderItems"
        :tableData="tableData"
        :loading="isLoad"
      >
      </HPTable>
    </template>
    <template v-slot:pagination>
      <el-pagination
        v-if="selectData.totalRows"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="selectData.currentPage"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="selectData.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="selectData.totalRows"
      >
      </el-pagination>
    </template>
  </HPCommonPage>
</template>
<script>
import HPCommonPage from "@/components/HPCommonPage";
import HPTable from "@/components/HPTable";
import { demandStatus } from "./js/status";
import { demandTableColumn } from "./js/cloumn";
import getQuery from '@/utils/mixins/getQuery';
import { loadToExclxPlu } from "@/utils/exportDatas";
function fetchDemandLists(store, opts) {
  return store.dispatch("GET_DEMAND_LISTS", opts);
}
function fetchExportDemandLists(store, opts) {
  return store.dispatch("GET_EXPORT_LISTS", opts);
}
export default {
  mixins: [getQuery],
  components: {
    HPCommonPage,
    HPTable,
  },
  data() {
    return {
      selectData: {
        // * 查询条件对象
        demandNo: "",
        jobName: "",
        sendName: "",
        status: "",
        currentPage: 1,
        pageSize: 10,
        totalRows: 0,
      },
      tabsList: demandStatus,
      tableHeaderItems: demandTableColumn, // * table字段
      tableData: [], // * table数据
      isLoad: true, // * table加载开关
    };
  },
  created() {
    let { stus } = this.$route.query || {};
    // * 获取首页跳转传递的参数
    if (stus) {
      this.selectData.status = stus;
    }
    this.fetchTableData();
    // if (stus) {
    //   this.$router.push({ query: {} });
    // }
  },
  methods: {
    // * 获取列表数据
    async fetchTableData() {
      this.isLoad = true;
      await fetchDemandLists(this.$store, this.selectData);
      this.isLoad = false;
      let { data, state } = this.$store.getters.getDemandLists;
      if (state === "0000") {
        const { lastPage, pageNum } = data;
        this.selectData.totalRows = data.total;
        this.tableData = data.list.reduce((prev, item) => {
          const [oneLevel, towLevel, threeLevel, fourLevel, fiveLevel] =
            item.paths.split("-") || [];
          prev.push({
            ...item,
            oneLevel,
            towLevel,
            threeLevel,
            fourLevel,
            fiveLevel,
          });
          return prev;
        }, []);
        if(pageNum > lastPage && lastPage > 0) {
          this.selectData.currentPage = lastPage
          this.fetchTableData()
        }
      }
    },
    // 导出
    exportDemandToExcle() {
      fetchExportDemandLists(this.$store, this.selectData).then(() => {
        let tempObj = this.$store.getters.getExportDemandLists;
        if (tempObj.state === "0000") {
          let tempData = tempObj.data,
            tempTitxt = tempData.title,
            tempDatas = tempData.list,
            tempHead = tempData.headMap;
          this.loadToExclxPlu(tempHead, tempDatas, tempTitxt);
        } else {
          this._showMessage("error", tempObj.message);
        }
      });
    },
    // 加载导出插件
    loadToExclxPlu(headData, datas, title) {
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/exportExcel/Export2Excel");
        if (headData) {
          let thKeys = [],
            tdKeys = [],
            thKey = "",
            thVal = "";
          for (let item in headData) {
            thKey = item;
            thVal = headData[item];
            tdKeys.push(thKey); // 内容
            thKeys.push(thVal); // 头部
          }
          const list = datas;
          const data = this.formatJson(tdKeys, list);
          export_json_to_excel(thKeys, data, title);
          this._showMessage("success", "需求导出成功！");
        }
      });
    },
    // 导出过滤多余字段
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    // * 查询
    selectDemandLists() {
      this.selectData.currentPage = 1;
      this.searchData = { ...this.selectData }
      this.fetchTableData();
    },
    // * 查看
    onLookDetail(row) {
      const needId = row.id;
      if (needId) {
        this.$router.push({
          path: `/getdemand/detail/${needId}`,
          query: {
            stus: `${row.status2}`,
            formQuery: JSON.stringify(this.searchData),
            suspendState: row.suspendState
          },
        });
      }
    },
    // * 切换页条数
    handleSizeChange(val) {
      this.selectData.pageSize = val;
      this.selectData.currentPage = 1;
      this.searchData = { ...this.selectData }
      this.fetchTableData();
    },
    // * 切换分页数
    handleCurrentChange(val) {
      this.selectData.currentPage = val;
      this.searchData = { ...this.selectData }
      this.fetchTableData();
    },
    // * 消息提示
    _showMessage(type, msg, fn) {
      this.$message({
        showClose: false,
        message: msg,
        type: type,
        duration: 1500,
        onClose: function () {
          if (fn instanceof Function) {
            fn();
          }
        },
      });
    },
  },
};
</script>
<style lang="scss"></style>
